<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <!-- 从被装饰页面获取title标签内容,并设置默认值--> 
    <title>华澳设备云服务平台 - <sitemesh:write property='title'  /></title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta name="author" content="CH.HUANG" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=Edge">
	<link rel="shortcut icon" href="favicon.ico">
    
    <!-- basic styles -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/toastr/toastr.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-multiselect.css"/>
		<link rel="stylesheet" href="assets/css/bootstrap-table.min.css"/>
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
		<link rel="stylesheet" href="assets/css/font-awesome.3.2.1.min.css" />
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="assets/fancyBox/jquery.fancybox.css?v=2.1.5" media="screen" />
		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/summernote.css" />
		<link rel="stylesheet" href="assets/backto_top/backto_top.css" />
		<!--[if lte IE 8]>
			<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
		<!-- inline styles related to this page -->
		<!-- ace settings handler -->
		<script src="assets/js/ace-extra.min.js"></script>
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
		
	<!-- basic scripts -->
		<!--[if !IE]> -->
		<script src="assets/js/jquery-2.0.3.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
			<script src="assets/js/jquery-1.10.2.min.js"></script>
		<![endif]-->
		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
			<script type="text/javascript">
				window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
			</script>
		<![endif]-->
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/bootstrap-multiselect.js"></script>
		<script src="assets/js/bootstrap-table.min.js"></script>
		<script src="assets/js/bootstrap-table-zh-CN.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>
		<script src="assets/fancyBox/jquery.fancybox.js?v=2.1.5"></script>
		<script src="assets/backto_top/backto_top.js"></script>
		<!--[if lte IE 8]>
		  <script src="assets/js/excanvas.min.js"></script>
		<![endif]-->
		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<!-- ace scripts -->
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
		
		<script src="assets/js/summernote.min.js"></script>
		<script src="assets/js/summernote-zh-CN.js"></script>
		<script src="assets/js/jquery.serializeJSON.min.js"></script>
		<script src="assets/js/jquery.cookie.js"></script>
		<script src="assets/js/jquery.form.js"></script>
		<script src="assets/js/bootbox.min.js"></script>
		<script src="assets/toastr/toastr.min.js"></script>
		<script src="assets/js/dateFormat.js"></script>
		<script src="assets/js/commonAjax.js"></script>
		<script src="assets/js/common.js"></script>
	
		<script type="text/javascript">
			$(function(){
				var pathname = window.location.pathname;
				pathname = pathname.substring(pathname.indexOf('pages/'), pathname.length);
				
				/*var array = [{"menuName":"菜单2","icon":"icon-list","url":"pages/demo2/demo2.html"},
				               {"menuName":"菜单3","icon":"icon-edit","url":"pages/demo3/demo3.html"},
				               {"menuName":"菜单1","icon":"icon-gears","asParent":true,
				            	   "sons":[{"menuName":"菜单1a","url":"pages/demo1/demo1a.html"},
				            	           {"menuName":"菜单1b","url":"pages/demo1/demo1b.html"}]}];
				*/
				
				get("system/menu/getMenu",function (array, textStatus) {
					var html = "";
					var indexUrl = '';
					$.each(array,function(i,v){
						if(v.asParent){
							var html_li="<li>";
							var html_temp="<a href='javascript:void(0);' class='dropdown-toggle'><i class='"+v.icon+"'></i><span class='menu-text'> "+v.menuName
								+"</span><b class='arrow icon-angle-down'></b></a>"
								+"<ul class='submenu'>";
							$.each(v.sons,function(j,w){
								if(indexUrl==''){
									indexUrl = w.url;
									$("#sys_name").attr("href",indexUrl);
								}
								if(w.url==pathname){
									html_li="<li class='active open'>";
									html_temp+="<li class='active'>";
								}else{
									html_temp+="<li>";
								}
								html_temp+="<a href='"+w.url+"'><i class='icon-double-angle-right'></i> "+w.menuName+"</a></li>";
							});
							html_temp+="</ul></li>";
							html+=html_li+html_temp;
						}else{
							if(indexUrl==''){
								indexUrl = v.url;
								$("#sys_name").attr("href",indexUrl);
							}
							
							if(v.url==pathname){
								html+="<li class='active'>";
							}else{
								html+="<li>";
							}
							html+="<a href='"+v.url+"'><i class='"+v.icon+"'></i><span class='menu-text'> "+v.menuName+"</span></a></li>";
						}
					});
					$("#menu").html(html);
					
					var status_html="<li><i class='icon-home home-icon'></i><a href='"+indexUrl+"'>首页</a></li>";
					$.each(array,function(i,v){
						if(v.asParent){
							$.each(v.sons,function(j,w){
								if(w.url==pathname){
									status_html+="<li>"+v.menuName+"</li>";
									status_html+="<li class='active'>"+w.menuName+"</li>";
								}
							});
						}else{
							if(v.url==pathname){
								status_html+="<li class='active'>"+v.menuName+"</li>";
							}
						}
					});
					$(".breadcrumb").html(status_html);
				});
				
				//sidebar
				if ($.cookie("sidebar_min_menu")=="true"){
					$("#sidebar").addClass("menu-min");
					$("#sidebar-icon").removeClass("icon-double-angle-left");
					$("#sidebar-icon").addClass("icon-double-angle-right");
				}else{
					$("#sidebar").removeClass("menu-min");
					$("#sidebar-icon").removeClass("icon-double-angle-right");
					$("#sidebar-icon").addClass("icon-double-angle-left");
				}
				$("#sidebar-icon").on("click",function(){
					if($("#sidebar").hasClass("menu-min")){
						$.cookie("sidebar_min_menu", "", {expires: -1, path: "/"});
					}else{
						$.cookie("sidebar_min_menu", "true",{path: "/"});
					}
				});
				
				$("#selfinfo-btn").click(function(){
					get("system/user/getUserInfo",function (json, textStatus) {
						if(json!=null){
							$("#self-username").val(json.username);
							$("#self-nickname").val(json.nickname);
							$("#self-phone").val(json.phone);
							$("#self-email").val(json.email);
							$(".info-label").html("");
							$("#selfinfo-modal").modal("show");
						}
					});
				});
				
				$("#password-btn").click(function(){
					$("#oldPassword").val("");
					$("#password").val("");
					$("#confirmPassword").val("");
					$(".info-label").html("");
					$("#password-modal").modal("show");
				});
				
				$("#logout-btn").click(function(){
					get("system/login/logout",function (json, textStatus) {
						if(json.success){
							location.href="<%=basePath%>pages/system/login.html";
						}
					});
				});
				
				$("#selfinfo-save-btn").click(function(){
					$("#selfinfo-form").ajaxSubmit({
						type : "post",
						url : "system/user/updateUserInfo",
						dataType : 'json',
						beforeSubmit : function(formData, jqForm, options){
							var username = $("#self-username").val();
							if(username==null || typeof(username) == "undefined"){
								$("#self-username-label").html("<code>*请输入用户名*</code>");
								return false;
							}
							username = username.replace(/(^\s*)|(\s*$)/g, "");
							if(username==""){
								$("#self-username-label").html("<code>*请输入用户名*</code>");
								return false;
							}
							
							var nickname = $("#self-nickname").val();
							if(nickname==null || typeof(nickname) == "undefined"){
								$("#self-nickname-label").html("<code>*请输入昵称*</code>");
								return false;
							}
							nickname = nickname.replace(/(^\s*)|(\s*$)/g, "");
							if(nickname==""){
								$("#self-nickname-label").html("<code>*请输入昵称*</code>");
								return false;
							}
							
							var phone = $("#self-phone").val();
							if(phone==null || typeof(phone) == "undefined"){
								$("#self-phone-label").html("<code>*请输入手机号*</code>");
								return false;
							}
							phone = phone.replace(/(^\s*)|(\s*$)/g, "");
							if(phone==""){
								$("#self-phone-label").html("<code>*请输入手机号*</code>");
								return false;
							}
							var pattern = /^[0-9]*$/;
							if(!pattern.test(phone)){
								$("#self-phone-label").html("<code>*手机号格式不正确,请输入正确的手机号*</code>");
								return false;
							}
							
							var email = $("#self-email").val();
							if(email==null || typeof(email) == "undefined"){
								$("#self-email-label").html("<code>*请输入邮箱号*</code>");
								return false;
							}
							email = email.replace(/(^\s*)|(\s*$)/g, "");
							if(email==""){
								$("#self-email-label").html("<code>*请输入邮箱号*</code>");
								return false;
							}
							var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+\.([a-zA-Z0-9_-])+/;
							if(!pattern.test(email)){
								$("#self-email-label").html("<code>*邮箱号格式不正确,请输入正确的邮箱号*</code>");
								return false;
							}
						},
						success : function (json){
							if(json.success){
								bootbox.alert("用户个人资料修改成功");
							}else{
								bootbox.alert("用户个人资料修改失败");
							}
					    },
						error : function (jqXHR, textStatus, errorThrown) {}
					});
				});
				
				$("#password-save-btn").click(function(){
					$("#password-form").ajaxSubmit({
						type : "post",
						url : "system/user/updatePassword",
						dataType : 'json',
						beforeSubmit:function(formData, jqForm, options){
							var oldPassword = $("#oldPassword").val();
							if(oldPassword==null || typeof(oldPassword) == "undefined"){
								$("#oldPassword-label").html("<code>*请输入原密码*</code>");
								return false;
							}
							oldPassword = oldPassword.replace(/(^\s*)|(\s*$)/g, "");
							if(oldPassword==""){
								$("#oldPassword-label").html("<code>*请输入原密码*</code>");
								return false;
							}
							
							var password = $("#password").val();
							if(password==null || typeof(password) == "undefined"){
								$("#password-label").html("<code>*请输入新密码*</code>");
								return false;
							}
							password = password.replace(/(^\s*)|(\s*$)/g, "");
							if(password==""){
								$("#password-label").html("<code>*请输入新密码*</code>");
								return false;
							}
							
							var confirmPassword = $("#confirmPassword").val();
							if(confirmPassword==null || typeof(confirmPassword) == "undefined"){
								$("#confirmPassword-label").html("<code>*请输入确认密码*</code>");
								return false;
							}
							confirmPassword = confirmPassword.replace(/(^\s*)|(\s*$)/g, "");
							if(confirmPassword==""){
								$("#confirmPassword-label").html("<code>*请输入确认密码*</code>");
								return false;
							}
							if(confirmPassword!=password){
								$("#confirmPassword-label").html("<code>*新密码与确认密码不相同*</code>");
								return false;
							}
						},
						success : function (json){
							console.log(json);
							if(json.success){
								bootbox.alert("用户密码修改成功");
								$("#password-form").resetForm();
							}else{
								if(json.result){
									bootbox.alert("用户密码修改失败："+json.result);
								}else{
									bootbox.alert("用户密码修改失败");
								}
							}
					    },
						error : function (jqXHR, textStatus, errorThrown) {}
					});
				});
				
				//点击文本框清空提示信息
				$(".info-input").click(function(){
					$(".info-label").html("");
				});
				//弹出层，可以用于显示图片
				$(".fancybox").fancybox();
			});
		</script>
    
	    <!-- 从被装饰页面获取head标签内容 -->
		<sitemesh:write property='head' />
  </head>
  
  <body>
  	<div class="navbar navbar-default" id="navbar">
			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a id="sys_name" class="navbar-brand">
						<small>
							<i class="icon-plane"></i>
							华澳设备云服务平台
						</small>
					</a><!-- /.brand -->
				</div><!-- /.navbar-header -->

				<div class="navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
						
						<li class="light-blue">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="assets/avatars/user.png" alt="User's Photo" />
								<span class="user-info">
									<span class="hidden" id="sessionUserId"><%=session.getAttribute("userId") %></span>
									<small>欢迎光临,<%=session.getAttribute("nickname") %></small>
									[<%=session.getAttribute("roleName") %>]
								</span>

								<i class="icon-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a id="selfinfo-btn" href="javascript:void(0);">
										<i class="icon-user"></i>
										个人资料
									</a>
								</li>
								<li>
									<a id="password-btn" href="javascript:void(0);">
										<i class="icon-cog"></i>
										设置密码
									</a>
								</li>
								<li class="divider"></li>

								<li>
									<a id="logout-btn" href="javascript:logout();">
										<i class="icon-off"></i>
										退出
									</a>
								</li>
							</ul>
						</li>
						
					</ul><!-- /.ace-nav -->
				</div><!-- /.navbar-header -->
			</div><!-- /.container -->
		</div>
		
		<div class="main-container" id="main-container">

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="javascript:void(0);">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<div class="sidebar-shortcuts" id="sidebar-shortcuts">
						<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
							<button class="btn btn-success">
								<i class="icon-signal"></i>
							</button>
							
							<button class="btn btn-warning">
								<i class="icon-group"></i>
							</button>
							
							<button class="btn btn-info">
								<i class="icon-wrench"></i>
							</button>
							
							<button class="btn btn-danger">
								<i class="icon-cogs"></i>
							</button>
						</div>

						<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
							<span class="btn btn-success"></span>

							<span class="btn btn-info"></span>

							<span class="btn btn-warning"></span>

							<span class="btn btn-danger"></span>
						</div>
					</div><!-- #sidebar-shortcuts -->

					<ul id="menu" class="nav nav-list">
						
					</ul><!-- /.nav-list -->

					<div class="sidebar-collapse" id="sidebar-collapse">
						<i id="sidebar-icon" class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
					</div>
				</div>

				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<ul class="breadcrumb">
							<!-- 
							<li>
								<i class="icon-home home-icon"></i>
								<a href="pages/task/task.html">首页</a>
							</li>
							<li class="active">工作状态查询</li>
							 -->
						</ul><!-- .breadcrumb -->
					</div>
					<div class="body-div">
						<!-- 从被装饰页面获取body标签内容 -->
						<sitemesh:write property='body' />
					</div>
				</div><!-- /.main-content -->
			</div><!-- /.main-container-inner -->
			
			<a href="javascript:void(0);" id="backto_top" ><img src="assets/backto_top/backto_top.gif"></a>
			
		</div>
	<!-- /.main-container -->

	<!-- selfinfo Modal -->
	<div id="selfinfo-modal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">个人资料</h4>
				</div>
				<div class="modal-body">
					
					<form id="selfinfo-form" class="form-horizontal">
					
					  <div class="form-group">
					    <label for="self-username" class="col-md-2 control-label">用户名</label>
					    <div class="col-md-6">
					      <input type="text" class="form-control info-input" id="self-username" name="username" placeholder="用户名" readonly >
					    </div>
					    <label id="self-username-label" class="col-md-4 info-label"></label>
					  </div>
					  <div class="form-group">
					    <label for="self-nickname" class="col-md-2 control-label">昵&nbsp;&nbsp;称</label>
					    <div class="col-md-6">
					      <input type="text" class="form-control info-input" id="self-nickname" name="nickname" placeholder="昵称">
					    </div>
					    <label id="self-nickname-label" class="col-md-4 info-label"></label>
					  </div>
					  <div class="form-group">
					    <label for="self-phone" class="col-md-2 control-label">手机号</label>
					    <div class="col-md-6">
					      <input type="text" class="form-control info-input" id="self-phone" name="phone" placeholder="手机号">
					    </div>
					    <label id="self-phone-label" class="col-md-4 info-label"></label>
					  </div>
					  <div class="form-group">
					    <label for="self-email" class="col-md-2 control-label">邮箱号</label>
					    <div class="col-md-6">
					      <input type="email" class="form-control info-input" id="self-email" name="email" placeholder="邮箱号">
					    </div>
					    <label id="self-email-label" class="col-md-4 info-label"></label>
					  </div>
					  
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="selfinfo-save-btn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- password Modal -->
	<div id="password-modal" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">设置密码</h4>
				</div>
				<div class="modal-body">
					
					<form id="password-form" class="form-horizontal">
					  
					  <div class="form-group">
					    <label for="oldPassword" class="col-md-2 control-label">原&nbsp;密&nbsp;码</label>
					    <div class="col-md-6">
					      <input type="password" class="form-control info-input" id="oldPassword" name="oldPassword" placeholder="原密码">
					    </div>
					    <label id="oldPassword-label" class="col-md-4 info-label"></label>
					  </div>
					  <div class="form-group">
					    <label for="password" class="col-md-2 control-label">新&nbsp;密&nbsp;码</label>
					    <div class="col-md-6">
					      <input type="password" class="form-control info-input" id="password" name="password" placeholder="新密码">
					    </div>
					    <label id="password-label" class="col-md-4 info-label"></label>
					  </div>
					  <div class="form-group">
					    <label for="confirmPassword" class="col-md-2 control-label">确认密码</label>
					    <div class="col-md-6">
					      <input type="password" class="form-control info-input" id="confirmPassword" placeholder="确认密码">
					    </div>
					    <label id="confirmPassword-label" class="col-md-4 info-label"></label>
					  </div>
					  
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="password-save-btn" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
